/**
 * gulp主文件用于注册任务
 * https://www.npmjs.com/package/gulp-webpack webpack的使用
 * npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev
 * gulp-webpack的版本默认是1.14的版本，注意一下
 **/
'use strict';

//node 代码
var gulp        = require('gulp'),
    browserSync = require('browser-sync').create(),
    SSI         = require('browsersync-ssi'),
    concat      = require('gulp-concat'),
    minify      = require('gulp-minify'),
    plumber     = require('gulp-plumber'),
    sass        = require('gulp-sass'),
    less        = require('gulp-less'),
    path        = require('path'),
    cssnano = require('gulp-cssnano'),
    imagemin = require('gulp-imagemin'),
    webpack = require('webpack'),
    webpackConfig = require('./webpack.config.js'),
    gulp_webpack = require('gulp-webpack'),
    gutil = require('gulp-util'),
    zip         = require('gulp-zip');

//注册一个任务 gulp say执行这个任务
gulp.task('say',function () {
    console.log('hello world');
});

gulp.task('serve', function() {

    browserSync.init({
        server: {
            baseDir:["./dist"],
            middleware:SSI({
                baseDir:'./dist',
                ext:'.html',
                version:'2.10.0'
            })
        }
    });

    gulp.watch("app/scss/**/*.scss", ['sass']);
    gulp.watch("app/less/**/*.less", ['less']);
    gulp.watch("app/js/**/*.js", ['webpack']); // webpack build-js js 三种载入方法
    gulp.watch("app/**/*.html", ['html']);
    gulp.watch("dist/**/*.html").on("change",browserSync.reload);
});

/**
 * 编译 sass 文件、并自动注入到浏览器
 */
//这里需要注意 app/sass/**/*.sass ，是 app/sass/ 目录下所有sass文件的意思
gulp.task('sass', function() {
    return gulp.src("app/scss/**/*.scss")
        .pipe(plumber())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sass({outputStyle:"compact"}))
        .pipe(cssnano())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('less', function() {
    return gulp.src("app/less/**/*.less")
        .pipe(plumber())
        .pipe(less({
            paths: [ path.join(__dirname, 'less', 'includes') ]
        }))
        .pipe(cssnano())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});
/**
 * 图片压缩插件
 */
gulp.task('image', function() {
    gulp.src('app/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
});
/**
 * 压缩 javascript 文件
 * 对 learn-gulp/app/scripts/ 下的所有 javascript 文件进行压缩处理并分发至 learn-gulp/dist/scripts/ 目录下，
 * 每个文件都会对应的生成相应的压缩文件, 如 file.js & file.min.js
 */
gulp.task('js', function(){
    return gulp.src('app/js/**/*.js')
        .pipe(plumber())
        .pipe(minify())
        .pipe(gulp.dest("dist/js"))
        .pipe(browserSync.stream());
});
/**
 * webpack的使用1
 */
var devCompiler = webpack(webpackConfig);
gulp.task('build', function(callback) {
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError("webpack:build-js", err);
        gutil.log("[webpack:build-js]", stats.toString({
            colors: true
        }));
        callback();
    });
});
/**
 * webpack的使用2
 */
gulp.task('webpack', function(){
    return gulp.src('app/js/entry/**/*.js')
        .pipe(gulp_webpack({
            entry: {
                //index:'./app/js/entry/index.js',
                //category:'./app/js/entry/category.js',
                //vue:'./app/js/entry/vue.js',
                vue2:'./app/js/entry/vue2.js'
            },
            output: {
                filename: '[name].js'
            },
            module: {
                loaders: [
                    {
                        test: /\.js$/,
                        loader: "babel",
                        exclude: /node_modules/
                    },
                    {
                        test:/\.vue$/,
                        loader:'vue'
                    }
                ]
            },
            babel: {
                presets: ['es2015','stage-0'],
                plugins: ['transform-runtime']
            },
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.common.js'
                }
            },
            plugins: [
                //压缩和丑化，作用在js上面
                new webpack.optimize.UglifyJsPlugin({
                    compress: {
                        warnings: false
                    },
                    output: {
                        comments: false
                    }
                })
                //直接定义第三方库
                //new webpack.ProvidePlugin({$: 'jquery'})
            ]
        }))
        .pipe(gulp.dest('dist/js/'))
        .pipe(browserSync.stream());
});

/**
 * 处理 html 文件
 * 这里并未对 html 文件做任何改动，你可以根据实际情况进行一些操作。
 */
gulp.task('html', function() {
    return gulp.src("app/*.html")
        .pipe(plumber())
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});
/**
 * 打包发布目标文件
 * 该任务负责把 learn-gulp/dist 目录下的文件打包成一个 zip 文件并分发至 learn-gulp/release 目录下。
 * 运行命令  $ gulp publish  可执行该任务。
 */
gulp.task('publish', function(){
    return gulp.src('dist/**/*')
        .pipe(plumber())
        .pipe(zip('publish.zip'))
        .pipe(gulp.dest('release'))
});

gulp.task('default', ['html','serve']);